<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./libs/bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="./font/iconfont/font_wfwf1mhqz7/iconfont.css">
    <link rel="stylesheet" href="./css/login.css">
    <script src="./js/jquery-3.1.1.js"></script>
    <script src="./libs/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <script src="./js/utils.js"></script>
    <script src="./js/allData.js"></script> 
</head>

<body>
    <div class="container-fluid login_box">
        <div class="login_center">
            <div class="register_box row">
                <div class="register_left col-md-7">
                </div>
                <div class="register_right col-md-5">
                    <div>
                        <h2>维修调度管理系统</h2>
                        <p>WELCOMEE欢迎登录</p>
                    </div>
                    <div class="userName_div reg_div">
                        <span class="iconfont icon-xingmingyonghumingnicheng"></span>
                        <input type="text" id="userName" placeholder="请输入用户名(张三)">
                    </div>
                    <div class="pwd_div reg_div">
            <button></button>
            <span class="iconfont icon-mima"></span>
                        <input type="text" id="userPwd" placeholder="请输入密码(123)">
                    </div>
                    <div class="cap_div reg_div">
                        <span class="iconfont icon-yanzhengma"></span>
                        <input type="text" id="capt" placeholder="请输入验证码">
                        <input type="button" id="code" title="看不清，下一张">
                    </div>
                    <button class="button" id="login" >立即登录</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        // $('#userName').tooltip()
        // 将数据存储至本地存储
        // setData()这个是utils.js中封装的方法
        setData('arrTypes', dataTypes)
        setData('arrManagement', dataManagement)
        setData('arrUser', userManagement)
        setData('arrRole', roleManagement)
        setData('guanliList',guanLiList)
        setData('weixiuList',weixiuList)

        let userList = [{
                username: '张三',
                pwd: 123
            },
            {
                username: '李四',
                pwd: 123
            }
        ]
        $('body').css({
            height: $(window).height() + 'px',
            backgroundColor: '#0072FF'
        })



        // 验证码
        let code = document.getElementById('code');


        let codes = '';
        function change() {
            // 组成验证码正则
            let yanzhengma = new Array('0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f',
                'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z',
                'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T',
                'U', 'V', 'W', 'X', 'Y', 'Z');

            // 初始化验证码
           
            // 随机生成四个数的验证码
            for (let i = 0; i < 4; i++) {
                let yanzheng = parseInt(Math.random() * yanzhengma.length);
                codes += yanzhengma[yanzheng];
            }
            // 将验证码放到input里面
            code.value = codes;


        }
        change()
        // 点击验证码切换
        code.onclick = function () {
            codes = '';
            change()
        };

        //验证节点
        let userName = document.getElementById('userName')
        let userPwd = document.getElementById('userPwd')
        let capt = document.getElementById('capt')


        // 登录验证
        // 登录功能实现
        $('#login').click(function () {
            let user = $('#userName').val();
            let pwd = $('#userPwd').val();
            let cap = $('#capt').val().toUpperCase();



            // 如果没有输入的值
            if (user.length == 0) {
                $('#userName').attr({
                    'data-toggle': "tooltip",
                    'data-placement': "top",
                    'data-original-title': "请输入用户名!"
                })
                $('#userName').tooltip('toggle')
            } else if (pwd.length == 0) {
                $('#userPwd').attr({
                    'data-toggle': "tooltip",
                    'data-placement': "top",
                    'data-original-title': "请输入密码!"
                })
                $('#userPwd').tooltip('toggle')
            } else if (cap.length == 0) {
                $('#capt').attr({
                    'data-toggle': "tooltip",
                    'data-placement': "top",
                    'data-original-title': "请输入验证码!"
                })
                $('#capt').tooltip('toggle')
            } else {
                if (cap !== codes.toUpperCase()) {
                    $('#capt').attr({
                        'data-toggle': "tooltip",
                        'data-placement': "top",
                        'data-original-title': "验证码输入错误!"
                    })
                    $('#capt').tooltip('toggle')
                    capt.value = ''
                    codes = ''
                    change();
                } else {
                    for (let i = 0; i < userList.length; i++) {
                        if (userList[i].username == user && userList[i].pwd != pwd) {
                            $('#capt').attr({
                                'data-toggle': "tooltip",
                                'data-placement': "top",
                                'data-original-title': "密码错误!"
                            })
                            $('#capt').tooltip('toggle')
                        } else if (userList[i].username != user && userList[i].pwd == pwd) {
                            $('#capt').attr({
                                'data-toggle': "tooltip",
                                'data-placement': "top",
                                'data-original-title': "用户名错误!"
                            })
                            $('#capt').tooltip('toggle')
                        } else {
                            location.href = './index.html';
                            let str = JSON.stringify(userList[i])
                            sessionStorage.setItem('user', str);
                            break;
                        }
                    }
                }

            }
        })
    </script>
</body>

</html>